liankao/src/pages/process/pyjd/[ykj_id].vue

<script setup>
import * as echarts from 'echarts'
import request from "~/utils/request";
import {REQUEST} from "~/utils/request";
import {user} from "~/store";
import {useRouter} from "vue-router";
const router = useRouter();
const route = useRoute();
const linkTo = (obj) => {
  router.push(obj);
};
let ykj_id = $ref('');
let ykj_name = $ref('');
let sm_id = $ref('');
let subject_id = $ref('')
let school_list = $ref([])
let subject_list = $ref([])
let teacherData = $ref([])
let subjectData = $ref([]);
let barTeacher = $ref([]);
let barPercent = $ref([]);
let barSubject = $ref([]);
let barSubjectData = $ref([]);
let sub_nav = [{
  id:'1',
  name:'教师批阅情况'
},{
  id:'2',
  name:'科目批阅进度总览'
}]
let cur_sub = $ref({
  id:'1',
  name:'教师批阅情况'
})
function getFilterData() {
  let data = {
    ykj_id: ykj_id
  };
  request({
    url: "/yzy/ksjh/detail",
    data: data,
  }).then((res) => {
    if (res.code === '1') {
      subject_list = res.data.one_info.ykj_kskm_ex;
      school_list = res.data.one_info.ykj_lkxx_ex;
    }
  })
}
function getData() {
  let data = {
    ykj_id: ykj_id,
    sm_id: sm_id,
    subject_id: subject_id,
  };
  request({
    url: "/yzy/jspyjd/main",
    data: data,
  }).then((res) => {
    if (res.code === '1') {
      ykj_name = res.data.data1.ksjh.ykj_ksrwmc;
      teacherData = res.data.data1.list;
      barTeacher = res.data.data1.users;
      barPercent = res.data.data1.values;
      barSubject = res.data.data2.users;
      barSubjectData = res.data.data2.values;
      subjectData = res.data.data2.list;
      if (cur_sub.id === '1') {
        nextTick(() => {
          initChart();
        })

      } else {
        nextTick(() => {
          initUnChart();
        })

      }

    }
  })
}
function initChart() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('barBox'));
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: '教师',
        data: barTeacher,
        axisTick: {
          alignWithLabel: true
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '扫描进度(%)',
        nameTextStyle: {
          fontSize: 14
        }
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: '27px',
        label: {
          show: true,
          position: 'top',
          color: '#000',
          fontSize: 14
        },
        itemStyle:{
          color:'#6897FF',
          borderRadius: [16, 16, 0, 0]
        },
        data: barPercent
      }
    ]
  });
}
function initUnChart() {
  // 绘制图表
  let myChart_u = echarts.init(document.getElementById('unBox'));
  myChart_u.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        name: '学科',
        data: barSubject,
        axisTick: {
          alignWithLabel: true
        },
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '批阅进度（%）',
        nameTextStyle: {
          fontSize: 14
        }
      }
    ],
    series: [
      {
        type: 'bar',
        barWidth: '27px',
        label: {
          show: true,
          position: 'top',
          color: '#000',
          fontSize: 14
        },
        itemStyle:{
          color:'#6897FF',
          borderRadius: [16, 16, 0, 0]
        },
        data: barSubjectData
      }
    ]
  });
}
function switchSub(item) {
  cur_sub = item;
  if(item.id === '1') {
    nextTick(()=>{
      initChart();
    })

  } else {
    nextTick(()=>{
      initUnChart();
    })

  }

}
onMounted(() => {
  if (route.params.ykj_id) {
    ykj_id = route.params.ykj_id;
    getData();
    getFilterData();
  }
})

</script>
<route lang="json">
{
"meta":{
"title":"扫描批阅进度",
"breadcrumb":true
}
}
</route>
<template>
  <NavHeader/>
  <bread-crumb/>
  <div class="w-1200px m-auto">
    <div class="relative -mt-40px flex justify-end">
      <button type="button" class="back-btn" @click="linkTo({name:'process'})">返回</button>
    </div>
    <div class="mt-10px w-full bg-hex-fff py-20px px-15px">
      <h3 class="mb-20px text-16px text-center">{{ykj_name}}</h3>
      <ul class="tab-nav m-auto">
        <li @click="linkTo({name:'process-smpyjd-ykj_id',params:{ykj_id:ykj_id}})">科目扫描进度</li>
        <li @click="linkTo({name:'process-kdsmjd-ykj_id',params:{ykj_id:ykj_id}})">考点扫描进度</li>
        <li class="selected">批阅进度</li>
      </ul>
      <div class="mt-30px flex items-center justify-between">
        <div>
          <el-select v-model="subject_id" placeholder="全部科目" size="large" @change="getData">
            <el-option label="全部" value=""
            />
            <el-option
              v-for="item in subject_list"
              :key="item.subject_id"
              :label="item.subject_name"
              :value="item.subject_id"
            />
          </el-select>
          <el-select class="ml-20px" v-model="sm_id" placeholder="全部学校" size="large" @change="getData">
            <el-option label="全部" value=""
            />
            <el-option
              v-for="item in school_list"
              :key="item.sm_id"
              :label="item.sm_name"
              :value="item.sm_id"
            />
          </el-select>
        </div>
        <ul class="sub-nav">
          <li v-for="item in sub_nav" :class="item.id === cur_sub.id?'selected':''" @click="switchSub(item)">{{item.name}}</li>
        </ul>
      </div>
      <div v-if="cur_sub.id === '1'">
        <div id="barBox" style="height: 500px"></div>
        <table class="mt-20px data-table" cellpadding="0" cellspacing="0">
          <tr>
            <th>教师</th>
            <th>进度</th>
            <th>完成量</th>
            <th>总份数</th>
            <th>平均分</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in teacherData">
            <td>{{item.user_name}}</td>
            <td>{{item.jd}}%</td>
            <td>{{item.wcl}}</td>
            <td>{{item.zfs}}</td>
            <td>{{item.pjf}}</td>
            <td>
              <button type="button" class="op-btn" @click="linkTo({name:'process-pyjd-id-bh',params:{id:ykj_id,bh:item.ysdt_pyyhbh}})">查看详情</button>
            </td>
          </tr>
        </table>
      </div>
      <div v-else>
        <div id="unBox" style="height: 500px"></div>
        <table class="mt-20px data-table" cellpadding="0" cellspacing="0">
          <tr>
            <th>学科</th>
            <th>批阅进度</th>
            <th>总份数</th>
            <th>完成量</th>
            <th>标记<br>异常数</th>
            <th>平均分</th>
            <th>满分</th>
            <th>在线人数</th>
            <th>操作</th>
          </tr>
          <tr v-for="item in subjectData">
            <td>{{item.xueke}}</td>
            <td>{{item.jd}}</td>
            <td>{{item.zfs}}</td>
            <td>{{item.wcl}}</td>
            <td>{{item.ycs}}</td>
            <td>{{item.pjf}}</td>
            <td>{{item.mf}}</td>
            <td>{{item.zxrs}}</td>
            <td>
              <button type="button" class="op-btn">查看详情</button>
            </td>
          </tr>
        </table>
      </div>
    </div>

  </div>

</template>

<style scoped lang="scss">
$color: #0048e5;
.tab-nav{
  width: 457px;
  background: #ffffff;
  border: 1px solid #dbe7ec;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 6px 9px;
  li{
    width: 140px;
    height: 28px;
    border-radius: 4px;
    font-size: 16px;
    color: #666;
    text-align: center;
    line-height: 28px;
    cursor: pointer;
    &+li{
      margin-left: 10px;
    }
    &.selected{
      background: #e2eaf9;
      color: #000;
    }
  }
}
.data-table {
  width: 100%;
  table-layout: fixed;

  tr:nth-child(even) {
    background: #F1F7FF;
  }

  th {
    height: 74px;
    background: $color;
    font-weight: normal;
    text-align: center;
    font-size: 16px;
    color: #fff;
    &:first-child{
      border-radius: 6px 0 0 0;
    }
    &:last-child{
      border-radius: 0 6px 0 0;
    }
  }

  td {
    padding: 15px 0;
    font-size: 16px;
    color: #474747;
    text-align: center;
  }
}

.no-data {
  width: 100%;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;

  .no-data-img {
    width: 233px;
    height: 199px;
    background: url("/images/no-data.png") center no-repeat;
  }
}
.op-btn {
  width: 82px;
  height: 30px;
  background: #fff;
  border: 1px solid #003eee;
  border-radius: 2px;
  font-size: 14px;
  color: #003eee;
  text-align: center;
  &:disabled{
    background: #ccc;
    border-color: #ccc;
    color: #fff;
    pointer-events: none;
  }
}
.sub-nav{
  width: 280px;
  height: 30px;
  display: flex;
  li{
    width: 50%;
    background: #ffffff;
    font-size: 16px;
    color: #000;
    border: 1px solid #dbe7ec;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    &.selected{
      border-radius: 4px!important;
      background:#003eee;
      border-color: #003eee;
      color: #fff;
    }
    &:first-child{
      border-right: 0;
      border-radius: 4px 0 0 4px;
    }
    &:last-child{
      border-left: 0;
      border-radius: 0 4px 4px 0;
    }
  }
}
</style>